<script setup>
import { ref } from 'vue'
defineProps({
    visible: {
        type: Boolean,
        required: true,
    },
    activeData: {
        type: Object,
        default() {
            return null
        },
    },
})
const emits = defineEmits(['update:visible'])
function closeAction() {
    emits('update:visible', false)
}
const dataList = ref([{}])
function getData() {}
getData()
function blurMin(e, index) {
    let value = e.target.value
    let activeItem = dataList.value[index]
    activeItem.min = value
}
function blurMax(e, index) {
    let value = e.target.value
    let activeItem = dataList.value[index]
    activeItem.max = value
}
function submitAction() {
    let items = dataList.value.map((item) => {
        return {
            item: item.item,
            min: item.min,
            max: item.max,
            unit: item.unit,
        }
    })
    for (let i = 0; i < items.length; i++) {
        if (items[i].min.length == 0 || items[i].max.length == 0) {
            // this.$message.error('所有阈值项都为必填')
            return
        }
    }
    this.$emit('success')
    // // return
    // this.$post('/fireFightingIOT/itemSetup/insertItemSetup', {
    //     item: items,
    //     number: this.number,
    // }).then(
    //     (res) => {
    //         this.$emit('success')
    //         this.$message.success('修改成功')
    //     },
    //     (err) => {
    //         this.loading = false
    //         this.$emit('fail')
    //         if (err.msg) {
    //             this.$message.error(err.msg)
    //         }
    //     }
    // )
}
</script>

<template>
    <el-dialog
        :model-value="visible"
        title="通知设置"
        width="800px"
        :draggable="true"
        @close="closeAction"
    >
        <div class="threshold">
            <el-table :data="dataList" style="width: 100%" v-loading="loading">
                <el-table-column prop="item" label="检测项"></el-table-column>
                <el-table-column prop="unit" label="单位"></el-table-column>
                <el-table-column prop="min" label="预警最小值">
                    <template #default="scope">
                        <input
                            class="threshold-ipt"
                            type="number"
                            :value="scope.row.min"
                            @blur="blurMin($event, scope.$index)"
                        />
                    </template>
                </el-table-column>
                <el-table-column prop="max" label="预警最大值">
                    <template #default="scope">
                        <input
                            class="threshold-ipt"
                            type="number"
                            :value="scope.row.max"
                            @blur="blurMax($event, scope.$index)"
                        />
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="closeAction">取消</el-button>
                <el-button type="primary" @click="submitAction">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style lang="scss" scoped>
.threshold-ipt {
    padding: 0 10px;
    height: 32px;
    line-height: 32px;
    width: 100px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    // &:focus{
    //     border-color: rgba(255,255,255,.4);
    // }
}
</style>
